<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="prop-panel">

                <div class="prop-top">
                    <div class="item1">
                        <div>是否编辑：</div>
                        <div class="edit">
                            <el-switch v-model="editingRef" size="small" />
                            <el-button @click.stop="draw"> 重新绘制</el-button>
                        </div>
                    </div>
                    <!-- <div class="item1">
                        <div>填充颜色：</div>
                        <div class="edit">
                            <el-color-picker v-model="polygonFillColor" show-alpha size="small" />
                        </div>
                    </div>
                    <div class="beizhu">提示：设置贴图会将填充颜色透明度设置为0</div> -->
                    <div class="item1">
                        <div>贴图：</div>
                        <div class="texture-img">
                            <el-input style="width: 140px;" disabled="true" v-model="url" clearable @clear="url = ''" />
                            <div class="list-img choose" @click="currentDialog = 'url'" title="选择"></div>
                        </div>
                    </div>
                    <div class="item1">
                        <div>尺寸：</div>
                        <div>
                            <el-input-number v-model="size" controls-position="right" :min="0" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
    <TexturePanel v-if="currentDialog == 'url'" :title="'选择贴图'" :isVisible="true" @close="currentDialog = undefined"
        @confirm="chooseConfirm" />
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { cssColorToXe2Color, extractNumbersFromRGBA, xe2ColorToCssColor } from "@/scripts/utils";
import { onBeforeUnmount, ref, watch } from "vue";
import {
    createVueDisposer,
    toVR
} from "earthsdk-ui";
import TexturePanel from "./TexturePanel.vue";

const props = withDefaults(defineProps<{ title: string, sceneObject: any, createOrEdit: string }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};

const uiLeft = document.body.clientWidth - 10 - 300;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

// 多边形
let editingRef: any;
const polygonFillColor = ref('rgba(10, 233, 245, 0.4)');

const url = ref('');
const size = ref(0);

const currentDialog = ref<any>('');

const init = () => {

    editingRef = toVR<any>(d, [props.sceneObject, "editing"])
    const fillColor = xe2ColorToCssColor(props.sceneObject.waterColor)
    polygonFillColor.value = `rgba(${fillColor[0]}, ${fillColor[1]}, ${fillColor[2]}, ${fillColor[3]})`

    url.value = props.sceneObject.waterImage ? (props.sceneObject.waterImage.url ?? '') : '';
    size.value = props.sceneObject.waterImage ? (props.sceneObject.waterImage.uDis ?? 0) : 0;

    watch(polygonFillColor, () => {
        const rgba = extractNumbersFromRGBA(polygonFillColor.value)
        props.sceneObject.waterColor = cssColorToXe2Color(rgba)
    })

    watch([url, size], (val) => {
        if (!size.value) {
            props.sceneObject.waterImage = {
                url: url.value,
            }
        } else {
            props.sceneObject.waterImage = {
                url: url.value,
                uDis: size.value,
                vDis: size.value,
            }
        }
        const rgba = extractNumbersFromRGBA(polygonFillColor.value)
        polygonFillColor.value = `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, 0)`
    })
}

// 重新绘制
const draw = () => {
    props.sceneObject.editing = false;
    props.sceneObject.points = []
    setTimeout(() => {
        props.sceneObject.editing = true;
    }, 50);

};

// 选择贴图
const chooseConfirm = (val: any) => {
    currentDialog.value = undefined
    url.value = val.url
    props.sceneObject.textureSize = val.textureSize
    props.sceneObject.textureId = val.textureId
    size.value = val.textureSize
}


watch(() => props.sceneObject, (newVal, oldVal) => {

    init()
}, { immediate: true })

onBeforeUnmount(() => {
    props.sceneObject.editing = false
});
</script>

<style scoped>
.box {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.prop-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prop-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item1 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
    margin-bottom: 10px;
}

.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}

.texture-img {
    display: flex;
    align-items: center;

}

.prop-bottom {
    display: flex;
    justify-content: flex-end;
}

.el-input-number--small {
    width: 90px;
}

.row {
    display: flex;
    gap: 10px;
}

.edit {
    display: flex;
    gap: 20px;
    align-items: center;
}

.beizhu {
    font-size: 13px;
    color: rgba(0, 0, 255, 1);
}

.el-input-number {
    width: 175px;
}
</style>
